<template>
  <div
    :class="[
      { default: type === '' },
      { success: type === 'success' },
      { info: type === 'info' },
      { warning: type === 'warning' },
      { danger: type === 'danger' },
    ]"
  >
    <slot />
    <span v-if="showDel" @click="deleted">x</span>
  </div>
</template>
<script>
import { defineComponent } from "vue";

export default defineComponent({
  props: {
    type: { default: "", type: String },
    showDel: { default: false, type: Boolean },
    close: Function,
  },
  setup(props, context) {
    const deleted = () => {
      props.close();
    };
    return { deleted };
  },
});
</script>
<style scoped lang="scss">
$default: #ecf5ff;
$success: #f0f9eb;
$info: #f4f4f5;
$warning: #fdf6ec;
$danger: #fef0f0;
.border {
  border: 1px solid darken($default, 10%);
}
@mixin color($type) {
  color: darken($type, 30%);
}
@mixin border($type) {
  border: 1px solid darken($type, 10%);
}
@mixin background($type) {
  background: $type;
}
@mixin style($type) {
  @include background($type);
  @include border($type);
  @include color($type);
  &:hover span {
    display: inline-block;
  }
}

div {
  padding: 5px 10px;
  border-radius: 4px;
  display: inline-block;
  span {
    text-align: center;
    margin-left: 4px;
    border-radius: 50%;
    display: none;
    cursor: pointer;
  }
}
.default {
  @extend .border;
  @include style($default);
}
.success {
  @extend .border;
  @include style($success);
}
.info {
  @extend .border;
  @include style($info);
}
.warning {
  @extend .border;
  @include style($warning);
}
.danger {
  @extend .border;
  @include style($danger);
}
</style>
